<template>
  <a-modal :width="1000" v-model:visible="showAddCampaignType" title="新增广告活动" title-align="start" :mask-closable="false" :footer="false" @cancel="closedDialog">
    <p class="title">选择广告活动类型</p>
    <ul class="flex-c-sb type-w">
      <li v-for="(type, i) in typeList" :key="i">
        <div class="type-name">{{ type.name }}</div>
        <a-image :src="type.url" />
        <div class="type-info">{{ type.info }}</div>
        <a-button v-if="type.usable" type="outline" shape="round" @click="openCreatePage()">继续</a-button>
        <a-button v-else disabled shape="round">开发中，暂无开放</a-button>
      </li>
    </ul>
    <div style="margin-top: 10px">
      <a-button class="gray-outline" size="medium" @click="deleteDraft(selectIds)" style="margin-bottom: 10px">批量删除</a-button>
      <a-table size="mini" class="table-singe-line" :scroll="{ x: '100%', y: 'calc(84vh - 500px)' }" :bordered="false" :pagination="false" :data="draftsList" row-key="id" @selection-change="selectColumn" :row-selection="rowSelection" :loading="tableLoading">
        <template #columns>
          <a-table-column v-for="(item, index) of columns" :key="index" :width="item.width" :title="item.title" :data-index="item.dataIndex">
            <template v-if="item.dataIndex == 'sort'" #cell="{ rowIndex }">
              <p>{{ rowIndex + 1 }}</p>
            </template>
            <template v-else-if="item.dataIndex == 'adType'" #cell="{ record }">
              <p>{{ AdTypes[record.adType] }}</p>
            </template>
            <template v-else-if="item.dataIndex == 'state'" #cell="{ record }">
              <template v-if="record.state == '创建失败'">
                <p class="warningColor">{{ record.state }}</p>
                <a-popover v-if="record.createFail">
                  <template #content="">
                    <p style="width: 400px">{{ record.createFail }}</p>
                  </template>
                  <p style="font-size: 12px" class="warningColor text-limit">原因：{{ record.createFail }}</p>
                </a-popover>
              </template>
              <p v-else>{{ record.state }}</p>
            </template>
            <template v-else-if="item.dataIndex == 'curHandlerflow'" #cell="{ record }">
              <p>{{ DraftFinishMap[record.curHandlerFlow] }}</p>
            </template>
            <template v-else-if="item.dataIndex == 'gmtCreate' || item.dataIndex == 'gmtModified'" #cell="{ record }">
              <p>{{ $setTime(record[item.dataIndex]) }}</p>
            </template>
            <template v-else-if="item.dataIndex == 'handle'" #cell="{ record }">
              <a-space>
                <a-button type="text" @click="openCreatePageByDarft(record)">编辑</a-button>
                <a-button type="text" @click="deleteDraft([record.id])">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { Message, Modal } from '@arco-design/web-vue'
  import { getCampaignDraftList, deleteCampaignDraft } from '@/api/advert'
  import { AdTypes, DraftFinishMap } from '../../types'
  import useAdvertStore from '@/store/modules/advert'

  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
  })
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  }) as any
  const tableLoading = ref(false)
  const selectIds = ref([])
  const draftsList = ref([])
  const showAddCampaignType = ref(props.isShow)
  const router = useRouter()
  const advertStore = useAdvertStore()
  const typeList = ref<any>([
    {
      name: '商品广告',
      key: 'sp',
      url: 'https://cdn2.selleroa.com/yfni/test/16904429887474f1130.png',
      info: '向在亚马逊上积极使用相关关键词进行搜索或者查看类似商品的买家推广产品',
      usable: true,
    },
    {
      name: '品牌广告',
      key: 'sb',
      url: 'https://cdn2.selleroa.com/yfni/test/169044298874708e2ce.png',
      info: '通过丰富而富有吸引力的广告素材帮助买家在亚马逊上发现您的品牌和商品',
      usable: false,
    },
    {
      name: '展示广告',
      key: 'sd',
      url: 'https://cdn2.selleroa.com/yfni/test/169044309120330e4c9.png',
      info: '通过吸引在亚马逊网站内外的相关受众拓展您的业务',
      usable: false,
    },
  ])
  const columns = [
    {
      title: '序号',
      dataIndex: 'sort',
      width: 40,
    },
    {
      title: '广告活动',
      dataIndex: 'campaignName',
      width: 130,
    },
    {
      title: '广告组',
      dataIndex: 'adGroupName',
      width: 130,
    },
    {
      title: '所属组合',
      dataIndex: 'portfolioName',
      width: 100,
    },
    {
      title: '类型',
      dataIndex: 'adType',
      width: 65,
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 65,
    },
    {
      title: '当前节点',
      dataIndex: 'curHandlerflow',
      width: 120,
    },
    {
      title: '创建人',
      dataIndex: 'createUserName',
      width: 70,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      width: 135,
    },
    {
      title: '更新时间',
      dataIndex: 'gmtModified',
      width: 135,
    },
    {
      title: '操作',
      dataIndex: 'handle',
      width: 80,
    },
  ]
  // 选择
  function selectColumn(val: any) {
    selectIds.value = val
  }
  // 获取草稿箱列表
  async function getDraftList() {
    tableLoading.value = true
    const res: any = await getCampaignDraftList({
      pageSize: 100,
      pageNum: 1,
    })
    tableLoading.value = false
    draftsList.value = res?.data?.data || []
  }
  getDraftList()
  // 关闭
  function closedDialog() {
    showAddCampaignType.value = false
    emit('closed')
  }
  // 编辑草稿箱
  function openCreatePageByDarft(item: any) {
    advertStore.changeDarftInfo(item)
    router.push('/advert/campaign/createSpCampaign')
    closedDialog()
  }
  // 进入编辑页面
  function openCreatePage() {
    advertStore.changeDarftInfo({})
    router.push('/advert/campaign/createSpCampaign')
    closedDialog()
  }
  // 删除草稿
  function deleteDraft(ids: Array<any>) {
    if (!ids.length) {
      Message.error('请选择需要删除的草稿')
      return
    }
    Modal.warning({
      title: '提示',
      content: '再次确认删除选中草稿？',
      titleAlign: 'start',
      hideCancel: false,
      onBeforeOk: async (done) => {
        const res: any = await deleteCampaignDraft(ids)
        if (res) {
          Message.success('已删除')
          getDraftList()
          done(true)
        }
      },
    })
  }
</script>
<style lang="less" scoped>
  .title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .type-w {
    padding: 0 60px;
    li {
      width: 240px;
      border: 1px solid var(--color-border);
      text-align: center;
      .arco-image-img {
        background-color: #f5f5f5;
      }
      .arco-btn-disabled {
        background-color: var(--color-fill-2) !important;
      }
      .type-name {
        font-size: 14px;
        background-color: #fff;
        line-height: 36px;
        font-weight: bold;
      }
      .type-info {
        padding: 10px;
        font-size: 12px;
        color: #999;
      }
      .arco-btn {
        width: 160px;
        margin: 10px 0 20px;
      }
    }
  }
</style>
